<div (click)="onClickBlank()"
     (contextmenu)="openMgrContextMenu($event, mgrCtxMenu)"
     class="container">
  <nz-page-header [nzGhost]="true" nzBackIcon="">
    <nz-page-header-title>
      <x-crumb (nodeClick)="onCrumbItemClick($event)" [data]="pathService.path"></x-crumb>
    </nz-page-header-title>

    <nz-page-header-extra>
      <button nz-button nz-dropdown [nzDropdownMenu]="menu" nzPlacement="bottomCenter">
        <i nz-icon nzType="plus" nzTheme="outline"></i>新建
      </button>
      <nz-dropdown-menu #menu="nzDropdownMenu">
        <ul nz-menu>
          <li nz-menu-item>新建文件</li>
          <li nz-menu-item>新建文件夹</li>
        </ul>
      </nz-dropdown-menu>

      <button nz-button nzType="primary">
        <i nz-icon nzType="upload" nzTheme="outline"></i>上传
      </button>
    </nz-page-header-extra>
  </nz-page-header>

  <!-- 文件列表显示区域 -->
  <!-- 如果选择列表时, 显示以下内容 (默认) -->
  <div class="content-container">
    <div *ngIf="displayType == 'list'">
      <!-- 文件列表表格 -->
      <nz-table
        [nzBordered]="false"
        [nzData]="files"
        [nzFrontPagination]="false"
        [nzLoading]="fileLoading"
        [nzScroll]="tableLayout"
        nzSize="middle"
      >
        <thead>
        <tr (click)="onClickSortBar($event)">
          <th
            (nzCheckedChange)="onCheckedAllFiles($event)"
            *ngIf="ctx.enableMultipleChoice" [nzChecked]="checkedAll"
            nzAlign="center"
            nzWidth="35px"
          ></th>
          <th nzAlign="center" nzWidth="45px"></th>
          <th (nzSortOrderChange)="doSortByFilename($event)" [nzSortFn]="sortByFilename0"
              nzAlign="left" nzWidth="300px">文件名
          </th>
          <th (nzSortOrderChange)="doSortByFileSize($event)" [nzSortFn]="sortByFileSize0"
              nzAlign="center" nzWidth="150px">大小
          </th>
          <th nzAlign="center" nzWidth="150px">创建日期</th>
          <th nzAlign="center" nzWidth="150px">更新日期</th>
        </tr>
        </thead>
        <tbody>
        <tr
          (dblclick)="onAccessFile(file)"
          (click)="onSelectedFile(file, $event)"
          (contextmenu)="openFileContextMenu($event, file, fileCtxMenu)"
          *ngFor="let file of files"
          [class.row-selected]="file.selected"
        >
          <td (nzCheckedChange)="onCheckedFile(file, $event)"
              *ngIf="ctx.enableMultipleChoice"
              [nzChecked]="file.checked"
              nzAlign="center"
          >
          </td>
          <td nzAlign="center">
            <i [nzIconfont]="file.icon" nz-icon></i>
          </td>
          <td nzAlign="left" nzEllipsis="true">{{ file.filename }}</td>
          <td nzAlign="center">{{ displayFilesize(file) }}</td>
          <td nzAlign="center">{{ file.created }}</td>
          <td nzAlign="center">{{ file.updated }}</td>
        </tr>
        </tbody>
      </nz-table>
    </div>

    <div *ngIf="displayType == 'lager-icon'">
      还没有实现这个页面 (流汗黄豆)
    </div>
  </div>

  <!-- 文件右键菜单 -->
  <nz-dropdown-menu #fileCtxMenu>
    <app-file-context-menu></app-file-context-menu>
  </nz-dropdown-menu>

  <!-- 目录管理右键菜单 -->
  <nz-dropdown-menu #mgrCtxMenu>
    <app-view-context-menu></app-view-context-menu>
  </nz-dropdown-menu>

  <app-upload>

  </app-upload>
</div>
